<script setup lang="ts">
import PhotoWall from '@/views/Mine/components/PhotoWall.vue'
import { ref, reactive } from 'vue'
import router from '@/router'
// 定义一个类，类似结构体
interface Position {
  y: number,
  scale: number
}
// 获取目标html标签
const draggableElement = ref<HTMLElement | null>()
// 定义一个响应式的数据
const position = reactive<Position>({ y: 0, scale: 0 })
let isDragging = false
let offsetY = 0
const startDragging = (event: TouchEvent) => {
  // 标记为正在拖拽
  isDragging = true
  // 获取当前的offsetY
  offsetY = event.touches[0].clientY - position.y
  // 监听鼠标移动touchmove，处理handleDragging
  document.addEventListener('touchmove', handleDragging)
  // 监听鼠标移动touchend，处理stopDragging
  document.addEventListener('touchend', stopDragging)
}

// 手指正在拖拽
const handleDragging = (event: TouchEvent) => {
  if (isDragging) {
    // 获取 偏移值，position为响应式数据，会自动更新
    position.y = event.touches[0].clientY - offsetY
    position.scale = (position.y / document.documentElement.clientHeight) * 100
    // if (position.scale < 10){
    //   position.scale = 10
    //   position.y = document.documentElement.clientHeight * 0.1
    //   return
    // }
    if (position.scale > 60) {
      position.scale = 60
      position.y = document.documentElement.clientHeight * 0.6
      return
    }
  }
}
// 手指结束拖拽
const stopDragging = () => {
  isDragging = false
  document.removeEventListener('touchmove', handleDragging)
  document.removeEventListener('touchend', stopDragging)

  if (position.scale < 10) {
    return
  }
  // 判断一下，最终是网上还是往下
  if (position.scale < 35) {
    position.scale = 10
    position.y = document.documentElement.clientHeight * 0.1
    return
  }
  if (position.scale > 35) {
    position.scale = 60
    position.y = document.documentElement.clientHeight * 0.6
    return
  }
}

const onMessage = ()=>{
  console.log('on message')
  router.push({ path: '/message' })
}

const onSetter = ()=>{
  console.log('onSetter')
  router.push({ path: '/setter' })
}

</script>
<template>
  <!-- <div> -->

    <PhotoWall />

    <div class="draggable" :style="{ top: `${position.scale}vh` }" ref="draggableElement" @touchstart="startDragging">
      <!-- 内容 -->
    </div>

    <span class="iconfont icon-tongzhi message" @click="onMessage"></span>

    <span class="iconfont icon-shezhi setter" @click="onSetter"></span>
  <!-- </div> -->
</template>

<style lang="scss" scoped>
.draggable {
  width: 100%;
  height: 80vh;
  background-color: #3498db;
  position: absolute;
  cursor: move;
  z-index: -1;
  display: none;
}

.message {
  position: fixed;
  right: 20vw;
  top: 10vw;
  background-color: #666;
  font-size: 6vw;
  width: 8vw;
  height: 8vw;
  color: #fff;
  margin-left: 4vw;
  text-align: center;
  line-height: 8vw;
  border-radius: 4vw;
}

.setter {
  position: fixed;
  right: 8vw;
  top: 10vw;
  background-color: #666;
  font-size: 6vw;
  width: 8vw;
  height: 8vw;
  color: #fff;
  margin-left: 4vw;
  text-align: center;
  line-height: 8vw;
  border-radius: 4vw;
}
</style>